<template>
  <div>
    <van-search
      placeholder="请输入搜索关键词"
      v-model="keyword"
      @keydown.enter="handleSearch"
    />
    <div class="item">
      <movie-item
        v-for="item of search"
        :item="item"
        :key="item._id"
        @click.native="toMoreDetail(item._id)"
      ></movie-item>
    </div>
  </div>
</template>

<script>
import MovieItem from "./component/MovieItem.vue";
export default {
  components: {
    MovieItem,
  },
  data() {
    return {
      keyword: "",
      search: [],
    };
  },
  methods: {
    handleSearch() {
      this.$http(
        `http://47.108.197.28:4000/api/search?keyword=${this.keyword}`
      ).then((res) => {
        res.data.res.forEach(item=>{
          var {rating,raiting} = item;
          item.star = rating
            ? this.handleStar(rating)
            : this.handleStar(raiting);
          item.rating = rating ? rating : raiting;
        })
        this.search = res.data.res;
      });
    },
    handleStar(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num > 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num).toFixed(2));
        } else {
          arr.push(0);
        }
        num -= 2;
      }
      return arr;
    },
  },
};
</script>

<style scoped>
.item{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>